<template>
  <ul class="box">
    <li v-for="(item,index) in data" :key="index" @click="nodeClickHandle($event,item,index)">
      <p class="time">{{item.time || item.hdsj}}</p>
      <dl class="content">
        <dd>{{item.address || item.hdnr || item.kkmc}}<span v-if="more" class="car">同卡口车辆：<span class="number">{{item.tkkTotal}}</span></span>
        </dd>

        <dd v-if="more">{{item.kkdz}}</dd>
      </dl>
    </li>
  </ul>
</template>

<script>
  /**
   * 纵向实际轨迹轴
   * {
   * time: 2018-3-29 11:21:47 // 轨迹时间
   * address: '' // 轨迹地址
   * }
   */
  export default {
    name: 'axis-y',
    components: {},
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      },
      more: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    methods: {
      nodeClickHandle (event, item, index) {
        this.$emit('nodeClick', event, item, index, event.currentTarget)
      }
    },
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .box {
    padding:1rem 2rem;
    li {
      &:first-child > .time{
        line-height: 1;
      }
      .time {
        color: #5077aa;
        background: url("../assets/zt/axis-icon.png") left center no-repeat;
        background-size: .9rem auto;
        text-indent: 1.8rem;
        line-height: 3rem;
        margin: 0;
      }
      &:first-child > .content{
        padding-top: 1rem;
      }
      .content {
        /*border-left: 2px solid rgba(80, 119, 170, 0.85);*/
        margin: 0 .3rem 0 0;
        padding-left: 1.45rem;
        background: url("../assets/zt/axis-line.png") left top repeat-y;
        background-size: .9rem auto;
        text-indent: .35rem;
        dd {
          margin-left: 0;
          .car {
            float: right;
            margin-right: 1rem;
            color: #656565;
          }
          .number {
            color: red;
          }
          &:last-child {
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
          }
          &:first-child {
            color: #000;
          }
        }
      }
      &:last-child > .content > dd {
        border: 0;
      }
    }
  }
</style>
